<template>
    <el-form-item label="" prop="title">
        <div class="flexbox flexcenter">
            <el-popover placement="bottom" width="460" trigger="click">
                <div class="yusuan_num">预算出价：{{createform.budget_list.length}} /10</div>
                <div class="yusuan_list">
                    <div class="yusuan_item flexbox flexcenter flexbetween" @click="seletBudget(item,index)" :class="{'active':index==createform.budget_active}" v-for="(item,index) in createform.budget_list" :key="index">
                        <img src="../../../assets/img/market_checked.svg" alt="" class="ys_check">
                        <el-input v-model="item.model_name" placeholder="请输入内容" size="small" class="ys_input" @input="changePlanKey(3,item.model_name)"></el-input>
                        <div class="yusuan_edit flexbox flexcenter">
                            <el-tooltip content="存为模板" placement="top">
                                <span class="icon_btn" @click.stop="saveModel(item,index,1)"><img src="../../../assets/img/ys_icon1.svg" alt=""></span>
                            </el-tooltip>
                            <el-tooltip content="删除" placement="top">
                                <span class="icon_btn" @click.stop="deletBudget(index)"><img src="../../../assets/img/ys_icon2.svg" alt=""></span>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
                <div class="yusuan_btn flexbox flexbetween">
                    <el-button size="mini" style="width:222px" @click="addBudget">添加预算出价</el-button>
                    <el-button size="mini" style="width:222px" @click="budgetModel">选择模板</el-button>
                </div>
                <div slot="reference" class="select_box flexbox flexcenter flexbetween">
                    <span class="select_text">{{createform.delivery.model_name}}</span>
                    <span class="el-icon-caret-bottom"></span>
                </div>
            </el-popover>
            <div class="yusuan_num" style="font-size:14px;margin-left:16px">预算出价：{{createform.budget_list.length}} /10</div>
        </div>
    </el-form-item>
</template>

<script>
export default {
    props:["createform"],
    name: "",
    data() {
        return {};
    },
    created() {},
    methods: {
        sessionSave(){
            this.$emit("sessionSave")
        },

        changePlanKey(index, name){
            this.$emit("changePlanKey",index,name)
        },

        saveModel(item, index, type){
            this.$emit("saveModel",item, index, type)
        },

        // 选择预算模板
        budgetModel() {
            const attr = {
                dialogVsb: true,
            };
            this.$bus.emit("budgetModel", attr);
        },

        //删除预算列表
        deletBudget(index) {
            let list = this.createform;
            if (this.createform.budget_list.length == 1) {
                return;
            } else {
                list.budget_list.splice(index, 1);
                list.budget_active = 0;
                list.delivery = list.budget_list[0];
                this.$bus.emit("timeModelData", this.createform);
            }
            this.sessionSave();
        },

        // 选择预算出价模板
        seletBudget(val, index) {
            let that = this;
            let list = that.createform;
            if (list.budget_list.length == 1) {
                list.budget_active = index;
                list.delivery = val;
            } else {
                this.budgetCheck(list.budget_active, function () {
                    list.budget_list[list.budget_active] = list.delivery;
                    list.budget_active = index;
                    list.delivery = val;
                    that.$bus.emit("timeModelData", that.createform);
                    that.changePlanKey(3, val.model_name);
                });
            }
            this.sessionSave();
        },

        // 预算出价校验
        budgetCheck(index, callback) {
            let list = this.createform.budget_list;
            let reg =
                /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
            if (!reg.test(list[index].budget)) {
                this.$message.error("请正确输入预算");
                return;
            }
            if (
                Number(list[index].budget) < 300 ||
                Number(list[index].budget) > 9999999
            ) {
                this.$message.error("请正确输入预算");
                return;
            }
            if (list[index].smart_bid_type == "SMART_BID_CUSTOM") {
                if (!reg.test(list[index].cpa_bid)) {
                    this.$message.error("请正确输入出价");
                    return;
                } else if (
                    Number(list[index].cpa_bid) < 0.1 ||
                    Number(list[index].cpa_bid) > 10000
                ) {
                    this.$message.error("请正确输入出价");
                    return;
                }
            }

            if (Number(list[index].cpa_bid) > Number(list[index].budget)) {
                this.$message.error("出价不得高于预算");
                return;
            }
            if (list[index].video_schedule_type == "SCHEDULE_START_END") {
                if (list[index].delivery_time == null) {
                    this.$message.error("用户出价投放开始和结束时间不能为空");
                    return;
                }
            }
            if (this.createform.delivery.budget_mode == "BUDGET_MODE_TOTAL") {
                let date_time = list[index].delivery_time;
                if (date_time.length > 0) {
                    let s1 = date_time[0];
                    let s2 = date_time[1];
                    s1 = new Date(s1.replace(/-/g, "/"));
                    s2 = new Date(s2.replace(/-/g, "/"));
                    let days = s2.getTime() - s1.getTime();
                    let time = parseInt(days / (1000 * 60 * 60 * 24)) + 1;

                    if (list[index].budget < time * 100) {
                        this.$message.error("预算不少于投放天数*100元");
                        return;
                    }
                }
            }
            callback();
        },

        // 添加预算列表
        addBudget() {
            let that = this;
            let list = that.createform;
            if (list.budget_list.length > 9) {
                return;
            } else {
                this.budgetCheck(list.budget_active, function () {
                    let delivery = {
                        model_name: "用户出价" + (list.budget_list.length + 1),
                        smart_bid_type: "SMART_BID_CUSTOM",
                        cost_control: false,
                        flow_control_mode: "FLOW_CONTROL_MODE_FAST",
                        budget_mode: "BUDGET_MODE_DAY",
                        budget: "300",
                        cpa_bid: "0.1",
                        schedule_fixed_range: "2",
                        video_schedule_type: "SCHEDULE_FROM_NOW",
                        delivery_time: [],
                        start_time: "",
                        end_time: "",
                        launch_period: "1",
                        schedule_time_value: "",
                        qcpx_mode:"QCPX_MODE_OFF"
                    };
                    list.budget_list.push(delivery);
                    list.budget_active = list.budget_list.length - 1;
                    list.delivery = list.budget_list[list.budget_active];
                });
            }
            this.sessionSave();
        },
    },
    components: {},
};
</script>


<style scoped>
</style>

